var imgBox = document.getElementById('imgbox');
var boxs = document.querySelectorAll(".box");
var game = document.getElementById("game");
var time = document.getElementById("time");
var banquan1 = document.getElementById("banquan1");
var body = document.getElementsByTagName("body");
var over = document.getElementById("over");
var fanhui = document.getElementById("fanhui");
var showit = document.getElementById("showit");
var jindu=document.getElementById("jindu");
var huadong=document.getElementById("huadong");
var tt, mytime = 80;
var num = 1;
window.onload = function() {
	kaishi();
}

function kaishi() {
	//打散
	//要交换元素的left，top值。
	//例如：直接a,b元素的位置
	//交换 10对元素的位置
	for(var i = 1; i < 20; i++) {
		var a = Math.floor(Math.random() * 9);
		var b = Math.floor(Math.random() * 9);

		console.info(a, b);
		if(a != b) {
			//交换boxs[a] 与boxs[b]
			//
			var _left = boxs[a].style.left;
			boxs[a].style.left = boxs[b].style.left;
			boxs[b].style.left = _left;

			var _top = boxs[a].style.top;
			boxs[a].style.top = boxs[b].style.top;
			boxs[b].style.top = _top;

			var _index = boxs[a].getAttribute("data-index");
			boxs[a].setAttribute("data-index", boxs[b].getAttribute("data-index"));
			boxs[b].setAttribute("data-index", _index);
		}
	}
	settime();
}

function settime() {

	tt = mytime;
	showtime = setInterval(function() {
		if(tt == 0) {
			clearInterval(showtime);
			game1.style.display = "block";
			if(game.style.display == "block") {
				game1.style.display = "none";
			}

		} else {
			tt--;
			time.innerHTML = tt;
			if(tt <= 10) {
				time.style.color = "red";
			}
		}
	}, 1000);
	time.style.color = "black";
}

function see() {
	game.style.display = "none";
	fanhui.style.display = "block";
}

function back1() {
	game.style.display = "block";
	fanhui.style.display = "none";
}

function showimg() {
	game1.style.display = "none";
	showit.style.display = "block";
	var thisimg;
	for(var i = 0; i < boxs.length; i++) {
		if(tupian1 == "") {
			thisimg = "img/1.jpg";
		} else {
			thisimg = tupian1;
		}
		showit.children[0].src = thisimg;
	}

}

function zctz() {
	showit.style.display = "none";
	loop();
}
//失败再来一次
function loop() {
	clearInterval(showtime);
	mytime = mytime;
	game.style.display = "none";
	game1.style.display = "none";
	var tupian2;
	for(var i = 0; i < boxs.length; i++) {
		if(tupian1 == "") {
			tupian2 = "img/1.jpg";
		} else {
			tupian2 = tupian1;
		}

		boxs[i].style.backgroundImage = "url(" + tupian2 + ")";

	}
	kaishi();
}
var tupian1 = "";
var kuandu=0;
function xiayiguan() {
	clearInterval(showtime);
	mytime = mytime;
	num += 1;
	kuandu+=42.9;
	huadong.style.width=""+kuandu+"px";
	var tupian = num;
	var src = "img/" + tupian + ".jpg";
	console.log(src)
	tupian1 = src;
	for(var i = 0; i < boxs.length; i++) {
		boxs[i].style.backgroundImage = "url(" + src + ")";

	}

	game.style.display = "none";
	for(var i = 1; i < 20; i++) {
		var a = Math.floor(Math.random() * 8);
		var b = Math.floor(Math.random() * 8);

		console.info(a, b);
		if(a != b) {
			//交换boxs[a] 与boxs[b]
			//
			var _left = boxs[a].style.left;
			boxs[a].style.left = boxs[b].style.left;
			boxs[b].style.left = _left;

			var _top = boxs[a].style.top;
			boxs[a].style.top = boxs[b].style.top;
			boxs[b].style.top = _top;

			var _index = boxs[a].getAttribute("data-index");
			boxs[a].setAttribute("data-index", boxs[b].getAttribute("data-index"));
			boxs[b].setAttribute("data-index", _index);
		}
	}
	if(num == 2) {
		name1.innerHTML = "麦积山第133窟  北魏  16号造像碑";
	}
	if(num == 3) {
		name1.innerHTML = "麦积山第四窟  北周  伎乐飞天";
	}
	if(num == 4) {
		name1.innerHTML = "麦积山第12窟  北周  菩萨";
	}
	if(num == 5) {
		name1.innerHTML = "麦积山第121窟  北魏  菩萨与弟子";
	}
	if(num == 6) {
		name1.innerHTML = "麦积山第123窟  西魏  童女";
	}
	if(num == 7) {
		name1.innerHTML = "麦积山第13窟  隋  西方三圣";
	}
	
	settime();
}
//从头开始再玩一次
function ctks() {
	clearInterval(showtime);
	num = 1;
	for(var i = 0; i < boxs.length; i++) {
		boxs[i].style.backgroundImage = "url(img/1.jpg)";
	}
	over.style.display = "none";
	kaishi();

}
var info = {
	x: 0,
	y: 0,
	top: 0,
	left: 0
}
for(var i = 0; i < boxs.length; i++) {
	boxs[i].addEventListener("touchstart", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		info.x = e.targetTouches[0].pageX;
		info.y = e.targetTouches[0].pageY;
		info.top = parseInt(this.style.top);
		info.left = parseInt(this.style.left);

		//缓存起点位置  给元素加了两个属性
		this.oriLeft = info.left;
		this.oriTop = info.top;

		//不要动画
		this.style.transition = "none";

	});
	//移动开始
	boxs[i].addEventListener("touchmove", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		//newTop - newY = top - Y
		//newTop = top -y + newY
		this.style["z-index"] = 1000;
		var newTop = info.top - info.y + e.targetTouches[0].pageY;
		var newLeft = info.left - info.x + e.targetTouches[0].pageX;

		this.style.left = newLeft + "px";
		this.style.top = newTop + "px";

	});
	//移动结束
	boxs[i].addEventListener("touchend", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		this.style.transition = " all .5s";
		this.style["z-index"] = 0;
		//对每 个元素进行检测
		// x > 元素的.offsetLeft && x <元素的.offsetLeft+ 100
		// y > 元素的.offsetTop && x <元素的.offsetTop+ 100
		var x = e.changedTouches[0].pageX - imgBox.offsetLeft,
			y = e.changedTouches[0].pageY - imgBox.offsetTop;
		console.info(x, y); //.targetTouches[0].pageX,e.targetTouches[0].pageY);
		//通过当前 x,y来找到应该要交换的元素是哪个？
		var obj = findSwtichBox(this, x, y);

		if(obj === this) { //不要交换元素
			//从哪里来就回到哪里去。
			obj.style.left = obj.oriLeft + "px";
			obj.style.top = obj.oriTop + "px";
		} else {
			swtichBoxs(this, obj);
			setTimeout(function() {
				if(isOk()) { //完成了
					//alert("ok");
					clearInterval(showtime);
					game.style.display = "block";
					if(num == 7) {
						over.style.display = "block";
						huadong.style.width=300+"px";
						var src1 = parseInt(3 * Math.random()) + 1;
						console.log(src1)
						var jiangli = "img/reward_" + src1 + "-qr.png"
						over.children[0].src = jiangli;
						game.style.display = "none";
						game1.style.display = "none";
					}
				}
			}, 600)

		}
		console.info(obj);
	});
}

function isOk() {

	// 思路：对每一个box设置一个“序号”（data-index）属性。每次交换后，都检查一下当前的元素的顺序是否与成功的序号是一致的。
	// 获取所有的元素的序号
	var str = "";
	for(var i = 0; i < boxs.length; i++) {
		str += boxs[i].getAttribute("data-index");
	}
	console.info(str);
	return str == "012345678";

}
//交换a，b元素的位置
function swtichBoxs(oriEle, targetEle) {
	//debugger;
	// var a = 10;
	// var b = 20;

	var _top = oriEle.oriTop; // var t = a;
	oriEle.style.top = targetEle.style.top; // a = b;
	targetEle.style.top = _top + "px"; // b = t;

	//把targetEle的top设置为oriEle的oriTop;
	var _left = oriEle.oriLeft; // var t = a;
	oriEle.style.left = targetEle.style.left; // a = b;
	targetEle.style.left = _left + "px"; // b = t;
	//交换data-index值
	var _index = oriEle.getAttribute("data-index");
	oriEle.setAttribute("data-index", targetEle.getAttribute("data-index"));
	targetEle.setAttribute("data-index", _index);

}
//根据x,y的值，看当前的x，y落在box中的哪一个元素上。
function findSwtichBox(obj, x, y) {
	//自己不参与检查

	for(var i = 0; i < boxs.length; i++) {
		if(obj !== boxs[i]) {
			var t1 = x > boxs[i].offsetLeft && x < (boxs[i].offsetLeft + 100);
			var t2 = y > boxs[i].offsetTop && y < (boxs[i].offsetTop + 100);
			if(t1 && t2) {
				//console.info(boxs[i]); 找到目标
				return boxs[i];
			}
		}

	}
	return obj; //没有找到目标，即返回自己
}